<template>
  <div class="infinite-container">

    <div class="moduleTop">
      <div class="label-identification yes" v-if="person.certificationValidityPeriod === '1'"></div>
      <div class="label-identification no" v-else></div>
      <div class="moduleTopBg flex flex_vcenter">
        <div class="flex flex_vcenter userBox">
          <div>
            <router-link to="/setting/improve-user-info">
              <img src="../../assets/images/head_images.png" class="headImg"/>
            </router-link>
          </div>
          <div @click="go('/setting/improve-user-info')">
            <p>{{person.mobile}}</p>
            <span>个人信息<i class="iconfont icon-small-arrow-right v-middle" ></i></span>
          </div>
        </div>
      </div>
      <div class="topIconBox">
        <div class="flex flex_vcenter" @click="go('/setting/family')">
          <i class="icon jzrglIcon"></i>
          <span class="ml10">就诊人管理</span>
        </div>
        <div class="flex flex_vcenter" @click="go('/appointment/history')">
          <i class="icon yyjlIcon"></i>
          <span class="ml10">预约记录</span>
        </div>
        <span class="vLine"></span>
      </div>
    </div>

    <div class="bgwhite mt10">
      <mu-list> 
        <mu-list-item title="账户查询" @click="go('/setting/query-account')">
          <i class="listIcon jyjlIcon" slot="left"></i>
          <i class="iconfont icon-small-arrow-right t3" slot="right"></i>
        </mu-list-item>
      </mu-list>
    </div>

    <div class="bgwhite mt10">
      <mu-list>
        <mu-list-item title="系统设置" @click="go('/setting/systemSetting')">
          <i class="listIcon xtszIcon" slot="left"></i>
          <i class="iconfont icon-small-arrow-right t3" slot="right"></i>
        </mu-list-item>
      </mu-list>
    </div>
  </div>
</template>

<script>
import {commonAjax, RESTFUL_API} from '@/api/api'
export default {
  name: 'setting',
  data () {
    return {
      person: JSON.parse(sessionStorage.person || '{}')
    }
  },
  mounted () {
    this.$store.commit('UPDATE_FOOTER')
    this.getSelf()
  },
  methods: {
    go (url) {
      this.$router.push(url)
    },
    getSelf () {
      if (!sessionStorage[this.$APP_PLATFORM_NAME]) {
        return
      }
      this.$store.commit('UPDATE_LOADING')
      let params = {}
      params[this.$APP_PLATFORM_NAME] = sessionStorage[this.$APP_PLATFORM_NAME]
      commonAjax(RESTFUL_API.getSelf, params).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 1) {
          let data = res.data.data
          if (data !== null) {
            this.person = data
          }
        }
      })
    }
  },
  beforeDestroy () {
    this.$store.commit('UPDATE_FOOTER')
  }
}
</script>
<style lang="less" scoped>
@import '../../common/css/vars.less';
@import '../../common/css/flex.css';

.bg_sprites() {
  background-image: url("../../assets/images/myPageIcons.png");
}

.moduleTop{
  position: relative;
  .label-identification {
    width: 152px;
    height: 60px;
    .bg_sprites();
    position: absolute;
    right: -17px;
    transform: scale(0.6);
    -webkit-transform: scale(0.6);
    top: 25%;
    &.yes {
      background-position: -10px -90px;
    }
    &.no {
      background-position: -10px -10px;
    }
  }
  .moduleTopBg{
    height:132px;
    background-image: url("../../assets/images/mine_bg.png");
    background-repeat: no-repeat;
    background-size: 100%;
    .headImg{
      width:60px;
      margin-right:10px;
    }
    .userBox{
      margin-left:30px;
      color:white;
      font-size:16px;
    }
  }
  background-color: white;
  padding:14px;
  .topIconBox{
    margin-top:14px;
    position: relative;
    overflow: hidden;
    .vLine{
      position: absolute;
      border-left:1px solid @color-border;
      left:50%;
      height:100%;
    }
    div{
      float: left;
      width:50%;
      padding-left:14px;
    }
  }
}
.icon{
  width:56px;
  height:43px;
    .bg_sprites();
  display:block;
  transform: scale(0.7);
  -webkit-transform: scale(0.7);
}
.yyjlIcon{
  background-position: -182px -72px;
}
.jzrglIcon{
  background-position: -182px -10px;
}
.listIcon{
  width:36px;
  height:36px;
    .bg_sprites();
  display:block;
  transform: scale(0.6);
  -webkit-transform: scale(0.6);
  &.xtszIcon{
    width:40px;
    height:40px;
  }
}
.wzjlIcon{
  background-position: -182px -172px;
}
.fzpyjlIcon{
  background-position: -70px -172px;
}
.gyjlIcon{
  background-position: -126px -172px;
}
.jyjlIcon{
  background-position: -258px -10px;
}
.xtszIcon{
  background-position: -10px -170px;
}
</style>
